import  { useState } from 'react'
import { NavBar, Card, Button, Space } from 'antd-mobile'
import { MoreOutline, UserOutline, CalendarOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import './zhu4.css'

function Index() {
  const navigate = useNavigate()
  const [selectedDate] = useState(new Date('2020-01-01'))

  const handleBack = () => {
    navigate(-1)
  }

  const handleSwitchPatient = () => {
    console.log('切换患者')
  }

  const handleDateSelect = () => {
    console.log('选择日期')
  }

  // 账单项目数据
  const billItems = [
    {
      id: 1,
      name: '住院诊查费',
      unitPrice: '20.00/晚',
      quantity: '1',
      amount: '20.00'
    },
    {
      id: 2,
      name: '5%葡萄糖氯化钠注射液',
      unitPrice: '5.96/瓶',
      quantity: '10',
      amount: '59.6'
    },
    {
      id: 3,
      name: '0.9%葡萄糖氯化钠注射液',
      unitPrice: '9.06/瓶',
      quantity: '10',
      amount: '90.6'
    },
    {
      id: 4,
      name: '10%氯化钾注射液',
      unitPrice: '0.72/瓶',
      quantity: '10',
      amount: '7.2'
    },
    {
      id: 5,
      name: '5%葡萄糖氯化钠注射液',
      unitPrice: '5.96/瓶',
      quantity: '10',
      amount: '59.6'
    }
  ]

  // 计算总金额
  const totalAmount = billItems.reduce((sum, item) => {
    return sum + parseFloat(item.amount)
  }, 0).toFixed(2)

  const formatDate = (date: Date) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}/${month}/${day}`
  }

  return (
    <div className="zhu4-container">
      {/* 顶部导航栏 */}
      <NavBar
        onBack={handleBack}
        right={
          <Space>
            <MoreOutline fontSize={20} />
            <div className="nav-icon">◎</div>
          </Space>
        }
        className="zhu4-navbar"
      >
        住院日清单
      </NavBar>

      {/* 患者信息区域 */}
      <div className="patient-info">
        <div className="patient-basic">
          <span className="patient-name" onClick={()=>navigate('/zhu5')}>王小柯</span>
          <span className="patient-id">2015****10</span>
        </div>
        <div className="switch-patient" onClick={handleSwitchPatient}>
          <UserOutline fontSize={16} />
          <span>切换</span>
        </div>
      </div>

      {/* 日期选择和总金额 */}
      <div className="summary-section">
        <Button className="date-button" onClick={handleDateSelect}>
          <CalendarOutline fontSize={16} />
          <span>{formatDate(selectedDate)}</span>
        </Button>
        
        <div className="total-cost">
          <span className="total-label">共花费:</span>
          <span className="total-amount">¥{totalAmount}</span>
        </div>
      </div>

      {/* 账单表格 */}
      <Card className="bill-card">
        {/* 表格头部 */}
        <div className="table-header">
          <div className="header-cell item-name">项目名称</div>
          <div className="header-cell unit-price">单价</div>
          <div className="header-cell quantity">数量</div>
          <div className="header-cell amount">金额</div>
        </div>

        {/* 表格内容 */}
        <div className="table-body">
          {billItems.map((item) => (
            <div key={item.id} className="table-row">
              <div className="table-cell item-name">
                <span className="item-title">{item.name}</span>
              </div>
              <div className="table-cell unit-price">
                <span className="price-text">¥{item.unitPrice}</span>
              </div>
              <div className="table-cell quantity">
                <span className="quantity-text">{item.quantity}</span>
              </div>
              <div className="table-cell amount">
                <span className="amount-text">¥{item.amount}</span>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  )
}

export default Index
